<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>文章列表</title>
   <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/iconfont.css">
   <link rel="stylesheet" href="css/main.css">
   <script src="./libs/jquery-1.12.4.min.js"></script>
   <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
   <!-- 引入模板引擎js文件 -->
   <script src="./libs/template-web.js"></script>
   <script src="./libs/https.js"></script>
</head>

<body>
   <div class="container-fluid">
      <div class="common_title">
         文章类别管理
      </div>
      <div class="container-fluid common_con">
         <table class="table table-striped table-bordered table-hover mp20 category_table">
            <thead>
               <tr>
                  <th>名称</th>
                  <th>Slug</th>
                  <th class="text-center" width="100">操作</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>奇趣事</td>
                  <td>funny</td>
                  <td class="text-center">
                     <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal"
                        class=" btn btn-info btn-xs">编辑</a>
                     <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
                  </td>
               </tr>
            </tbody>
            <tfoot>
               <tr>
                  <td colspan="3" class="text-center">
                     <a href="javascript:void(0)" class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                        data-target="#myModal">新增分类</a>
                  </td>
               </tr>
            </tfoot>
         </table>
      </div>
   </div>

   <!-- 模态框静态结构 -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                     aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
               <form>
                  <input type="hidden" name="id" id="type-id">
                  <div class="form-group">
                     <label for="recipient-name" class="control-label">分类名称:</label>
                     <input type="text" class="form-control" id="type-name" name="name">
                  </div>
                  <div class="form-group">
                     <label for="message-text" class="control-label">分类别名:</label>
                     <input type="text" class="form-control" id="type-slug" name="slug">
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
               <button type="button" class="btn btn-change">Send message</button>
            </div>
         </div>
      </div>
   </div>

</body>

</html>
<script type="text/html" id="art-type">
   {{each data v}}
         <tr>
            <td>{{v.name}}</td>
            <td>{{v.slug}}</td>
            <td class="text-center">
               <a href="javascript:void(0)" data-id='{{v.id}}' data-toggle="modal" data-target="#myModal" class=" btn btn-info btn-xs">编辑</a>
               <a href="javascript:void(0)" data-id='{{v.id}}' class="btn btn-danger btn-xs btn-del">删除</a>
            </td>
         </tr>
   {{/each}}
</script>
<script>
   $(function () {
      // 封装获取文章类型，多处可能复用
      function loadData() {
         $.ajax(
            {
               url: BigNew.category_list,
               success: res => {
                  if (res.code == 200) {
                     let str = template('art-type', res)
                     $('tbody').html(str)
                  }
               }
            }
         )
      }
      loadData();

      $('#myModal').on('show.bs.modal', function (e) {
         let elm = e.relatedTarget
         if (elm.innerText == '新增分类') {
            $('.modal-title').text('新增分类')
            $('.btn-change').text('新增').addClass('btn-success').removeClass('btn-info')
         } else {
            $('.modal-title').text('编辑')
            $('.btn-change').text('编辑').addClass('btn-info').removeClass('btn-success')
         }

         let dataid = $(elm).attr('data-id');
         $.ajax(
            {
               url: BigNew.category_search,
               data: {
                  id: dataid
               },
               success: function (res) {
                  if (res.code == 200) {
                     $('#type-name').val(res.data[0].name)
                     $('#type-slug').val(res.data[0].slug)
                     $('#type-id').val(res.data[0].id)
                  }
               }
            }
         )
      })

      $('#myModal').on('hide.bs.modal', function (e) {
         $('#type-name').val('')
         $('#type-slug').val('')
      })

      $('.btn-change').on('click', function () {
         if ($(this).text() == '新增') {
            //新增分类功能
            let name = $('#type-name').val().trim()
            let slug = $('#type-slug').val().trim()

            if (name == '' || slug == '') {
               return;
            }
            $.ajax(
               {
                  type: 'post',
                  url: BigNew.category_add,
                  data: {
                     name: name,
                     slug: slug
                  },
                  success: res => {
                     // console.log(res);
                     if (res.code == 201) {
                        $('#myModal').modal('hide')
                        loadData();
                     }
                  }
               }
            )
         } else {
            // 编辑功能
            let data = $('form').serialize();
            // console.log(data);
            $.ajax(
               {
                  type: 'post',
                  url: BigNew.category_edit,
                  data: data,
                  success: res => {
                     // console.log(res);
                     if (res.code == 200) {
                        $('#myModal').modal('hide')
                        loadData();
                     }
                  }
               }
            )
         }
      })


      $('tbody').on('click','.btn-del',function(){
         let dataid=$(this).attr('data-id')
         $.ajax(
            {
               type:'post',
               url:BigNew.category_delete,
               data:{
                  id:dataid
               },
               success:res=>{
                  if (res.code==204) {
                     loadData();
                  }
               }
            }
         )
      })
   })
</script>